<template>
	<view class="page-book-detail">

		<image class="book-image" :src="bookItem?.coverpic" mode="aspectFill" />

		<view class="book-info">{{ bookItem?.title }}</view>
		<view class="book-disc">{{ bookItem?.desc }}</view>


		<view class="episode-info">
			<view class="free-episodes">漫画选集</view>
			<view class="total-episodes">{{ bookItem?.isfinish ? '已完结' : '连载中' }}·共{{ bookItem?.allchapter }}话</view>
		</view>

		<view class="data-list">
			<view class="chapter-preview" v-for="item in chaptersList" @click="readingPage(item)">
				<image class="chapter-image" :src="item.coverpic" mode="aspectFill" />

				<view class="chapter-details">{{ item.title }}</view>

				<view class="chapter-title text-ellipsis" v-if="item.is_vip">

					<image v-if="item.is_vip" class="lock-chapter-img" :src="imgBaseUrl + 'Frame 7632@2x.webp'" />
				</view>
			</view>
		</view>

	</view>

	<view class="action-buttons">
		<view class="follow-btn" @click="followBook">
			<image class="btn-icon"
				:src="imgBaseUrl + (bookItem?.is_collect ? 'Frame 7625@2x (1).webp' : 'Frame 7625@2x.webp')" />
			<view class="btn-text">{{ bookItem?.is_collect ? '已追更' : '追更' }}</view>
		</view>
		<view class="continue-btn" @click="continueReading"> 继续阅读 </view>
	</view>

	<UnlockVipModal ref="modal" :bookItem="bookItem" @maskClick="popupClose" @unLockSuccess="unLockSuccess" />
</template>

<script lang="ts" setup>
import { getBookDetail, eventUser, getBookAddMe, getBookDelMe, getHistoryChaps } from '@/api';
import { onLoad } from '@dcloudio/uni-app';
import { ref, getCurrentInstance } from 'vue'
import UnlockVipModal from '@/components/unlock-vip-popup/unlock-vip-popup.vue'

const { imgBaseUrl } = getCurrentInstance()?.proxy as any;

const bookItem = ref<API.BookDetail>()
const chaptersList = ref<API.BookChapters[]>()
const modal = ref()


const goVipPage = () => {
	eventUser({ event: 8 })
	modal.value.open()
}
const popupClose = () => {
	modal.value.close()
}


const followBook = async () => {
	try {
		if (bookItem.value?.is_collect) {
			await getBookDelMe(bookItem.value?.id!)
			bookItem.value!.is_collect = 0
			uni.showToast({
				title: '已取消追更',
				icon: 'none'
			})
		} else {
			await getBookAddMe(bookItem.value?.id!)
			bookItem.value!.is_collect = 1
			uni.showToast({
				title: '追更成功',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error(error)
	}
}

const continueReading = async () => {
	try {
		const { data } = await getHistoryChaps(bookItem.value?.id!)
		uni.redirectTo({
			url: `/pages/readingPage/index?&id=${bookItem.value?.id}&chapter=${data.history_chapter}`
		})
	} catch (error) {
		console.error(error)
	}
}

// 支付成功
const unLockSuccess = async () => {
	getData(bookItem.value?.id!)
}

const getData = async (id: number) => {
	const { data } = await getBookDetail(id)
	bookItem.value = data
	chaptersList.value = data.items
	uni.setNavigationBarTitle({ title: bookItem.value.title })

}
const readingPage = (item: API.BookChapters) => {
	bookItem.value!.chaps = item.chaps
	if (item.is_vip) return goVipPage()
	uni.navigateTo({ url: `/pages/readingPage/index?&id=${bookItem.value?.id}&chapter=${item.chaps}` });
}

onLoad((query) => {
	getData(query?.id)
})
</script>

<style lang="less" scoped>
.page-book-detail {
	width: 100vw;
	min-height: 100vh;
	padding: 0 0 100rpx;
	display: flex;
	flex-direction: column;

	.book-image {
		width: 100%;
		height: 502rpx;
		margin-bottom: 34rpx;
	}

	.book-info {
		font-size: 32rpx;
		color: #333333;
		margin-top: 34rpx;
		margin-bottom: 20rpx;
		padding: 0 30rpx;
	}

	.book-disc {
		font-size: 28rpx;
		color: #666666;
		line-height: 48rpx;
		padding: 0 30rpx;
	}

	.episode-info {
		width: 100%;
		margin-top: 38rpx;
		padding: 0 30rpx;
	}

	.free-episodes {
		font-weight: bold;
		font-size: 30rpx;
		color: #000000;
	}

	.total-episodes {
		margin-top: 10rpx;
		font-size: 24rpx;
	}

	.data-list {
		padding: 0 30rpx;
		display: flex;
		flex-flow: row wrap;
		justify-content: flex-start;
		align-items: flex-start;

		.chapter-preview {
			position: relative;
			margin-top: 28rpx;
			width: 212rpx;
			height: 160rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			margin-right: 26rpx;

			&:nth-child(3n) {
				margin-right: 0;
			}
		}

		.chapter-image {
			width: 212rpx;
			height: 124rpx;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
		}

		.chapter-details {
			font-size: 24rpx;
			color: #222222;
		}

		.chapter-title {
			position: absolute;
			top: 0;
			left: 0;
			width: 212rpx;
			height: 124rpx;
			background: rgba(0, 0, 0, 0.6);
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.lock-chapter-img {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}




}

.action-buttons {
	background: #ffffff;
	position: sticky;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0 24rpx 50rpx;
	margin: 30rpx 0;

	.follow-btn {
		width: 62rpx;
		margin-right: 86rpx;
		display: flex;
		flex-flow: column;
		justify-content: center;
		align-items: center;

		.btn-icon {
			width: 48rpx;
			height: 48rpx;
			margin-bottom: 8rpx;
		}

		.btn-text {
			font-size: 20rpx;
			color: #666666;
		}
	}

	.continue-btn {
		width: 482rpx;
		height: 72rpx;
		background: #0DA0FF;
		border-radius: 36rpx 36rpx 36rpx 36rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: center;
	}

}
</style>
